<template>
  <div class="dataBoard">
    <el-container>
      <el-header class="dataBoard-top"><span>数据看板</span></el-header>
      <el-header class="dataBoard-middle">
        <span>选择平台</span>
        <el-select v-model="value" placeholder="Select" class="el-select_div">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            :disabled="item.disabled"
          />
        </el-select>
        <div class="block">
          <el-date-picker
            v-model="value1"
            type="daterange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            :size="size"
          />
        </div>
        <el-button type="primary" class="button">查询</el-button>
      </el-header>
      <el-main>
        <echarts />
        <!-- <router-view/> -->
      </el-main>
    </el-container>
  </div>
</template>

<script>
import Echarts from '@/components/Echarts'

export default {
  components: {
    Echarts
  }

}
</script>

<style scoped>

.el-select_div {
  box-shadow: 0px 0px 1px #888888;
  border-bottom: #888888 !important;
}

.dataBoard {
  background-color: #fff;
  margin: 15px 20px;
}

.dataBoard-top {
  background-color: #2E54EA;
  height: 41px;
  color: white;
  line-height: 41px;
  border-radius: 3px;
  position: relative;
}

.dataBoard-top span {
  font-size: 15px;
  position: absolute;
  left: 30px;
}

.dataBoard-middle {
  /* height: 41px;
  line-height: 41px; */
  display: flex;
  align-items: center;
  /* justify-content: space-around; */
}

.dataBoard-middle span{
  margin-right: 20px;
  /* display: flex; */
}

.block {
  margin-left: 40px;
}

.button {
  margin-left: 40px; 
}

.button span {
  margin-right: 0;
}

</style>